<template>
  <div class="emoji-scroll-view">
    <ul>
      <li
        v-for="item in emojiData.dagongren"
        :key="item.title"
        :title="item.title"
      >
        <van-image
          :src="item.icon"
          width="50px"
          height="50px"
          @click="selectIcon(item)"
        />
      </li>
    </ul>
  </div>
</template>
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  watchEffect,
  nextTick,
} from "vue";
import emoji from "@/assets/emoji.ts";
import { useSocket } from "@/utils/socket/useSocket";
export default defineComponent({
  props: {
    roomInfo: {
      type: Object,
      default: () => {},
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  setup(props: any, { emit }: any) {
    const state = reactive({
      emojiData: emoji,
    });

    const { proxy } = getCurrentInstance() as any;

    const { sendInfoNetWorkFun, sendLocalMsgFun } = useSocket();

    const selectIcon = async (icon: any) => {
      emit("select", icon);
    };

    return {
      ...toRefs(state),
      selectIcon,
    };
  },
});
</script>
  <style lang="less" scoped>
.emoji-scroll-view {
  ul {
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
 
    li {
      margin: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease 0s;
    }
    li:hover {
      transform: scale(1.2);
    }
  }

  ul::after {
    content: "";
    justify-content: flex-start;
    margin: 10px;
    width: 50px;
  }
}
</style>
    